<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>简单布局示例</title>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
        padding: 20px;
      }
      .inputs {
        width: 30%;
      }
      .list {
        width: 25%;
      }
      .plantuml-img {
        width: 40%;
      }
      .inputs textarea.query {
        margin-bottom: 10px;
        padding: 10px;
        width: 100%;
        height: 100px; /* 设置高度，可以根据需要调整 */
        box-sizing: border-box;
      }
      .inputs textarea.response {
        margin-bottom: 10px;
        padding: 10px;
        width: 100%;
        height: 400px; /* 设置高度，可以根据需要调整 */
        box-sizing: border-box;
      }
      .inputs textarea.prompt {
        margin-bottom: 10px;
        padding: 10px;
        width: 100%;
        height: 100px; /* 设置高度，可以根据需要调整 */
        box-sizing: border-box;
      }
      .list {
        height: 90vh;
        overflow-y: scroll;
      }
      .list ol {
        cursor: pointer;
      }
      .li_clicked {
        background: yellow;
      }
    </style>
    <script src="./js/vue.js"></script>
    <script src="./js/synchro2.min.js"></script>
    <script src="./js/jquery.js"></script>
  </head>
  <body>
    <div id="app" class="container">
      <div class="list">
        <h2>列表</h2>
        <ol>
          <li
            v-for="(item, item_index) in items"
            v-on:click="select_item(item, item_index)"
            :id="'item_' + item_index"
            :class="{li_clicked: (selected_item_index == item_index)}"
          >
            {{item.query}}
          </li>
        </ol>
      </div>
      <div class="inputs">
        <h2>输入框</h2>
        <textarea class="query" v-model="selected_item.query"></textarea>
        <textarea class="response" v-model="selected_item.response"></textarea>
        <button v-on:click="export_items()">输出</button>
        <button v-on:click="add_item()">添加</button>
        <button v-on:click="llm_gen()">生成</button>
        <textarea
          class="prompt"
          v-model="prompt"
          placeholder="输入提示语"
        ></textarea>
        <textarea
          class="prompt"
          v-model="filter_eval"
          placeholder="输入过滤代码"
        ></textarea>
      </div>
      <div class="plantuml-img">
        <img
          :src="compress(selected_item.response, '/png/')"
          style="max-width: 100%"
        />
      </div>
    </div>
    <script></script>
    <script>
      $.get("./data.json").done((data) => {
        console.log(data);
        new Vue({
          el: "#app",
          data() {
            return {
              items: data,
              selected_item: { query: "", response: "" },
              selected_item_index:
                sessionStorage.getItem("selected_item_index") || -1,
              prompt: "",
              filter_eval: "",
            };
          },
          methods: {
            compress: function (s, pre) {
              //UTF8
              s = unescape(encodeURIComponent(s));
              var arr = [];
              for (var i = 0; i < s.length; i++) {
                arr.push(s.charCodeAt(i));
              }
              var compressor = new Zopfli.RawDeflate(arr);
              var compressed = compressor.compress();
              dest =
                "http://192.168.3.157:13001/plantuml" +
                pre +
                encode64_(compressed);
              return dest;
            },
            export_items: function () {
              console.log(JSON.stringify(this.items));
              navigator.clipboard.writeText(JSON.stringify(this.items));
            },
            scrollToItem(index) {
              const targetLi = this.items[index];
              targetLi.scrollIntoView({ behavior: "smooth" });
            },
            select_item(item, item_index) {
              this.selected_item = item;
              this.selected_item_index = item_index;
              sessionStorage.setItem("selected_item_index", item_index);
            },
            add_item() {
              let item = {
                query:
                  "根据下面的需求生成一段plantuml流程图代码,只输出代码无需解释。\n",
                response: "",
              };
              this.items.push(item);
              // this.prompt = "";
              this.selected_item = item;
              this.selected_item_index = this.items.length - 1;
              sessionStorage.setItem(
                "selected_item_index",
                this.selected_item_index
              );
            },
            llm_gen() {
              let that = this;

              // 循环尝试获取llm的结果，直到正确
              async function get_llm() {
                let data = await $.post({
                  url: "http://10.0.8.11:5000/chat",
                  contentType: "application/json",
                  data: JSON.stringify([
                    {
                      role: "system",
                      content: "你是plantuml助手。" + that.prompt,
                    },
                    { role: "user", content: that.selected_item.query },
                  ]),
                });

                let plantumlCode = data[0];
                that.selected_item.response = plantumlCode;

                // 校验正确性
                let url = that.compress(that.selected_item.response, "/png/");
                let plantuml_server_check_result = await new Promise(
                  (resolve, reject) => {
                    $.get(url)
                      .done((data) => {
                        resolve(true);
                      })
                      .fail((jqXHR, textStatus, errorThrown) => {
                        resolve(false);
                      });
                  }
                );
                let filter_check =
                  eval(that.filter_eval) == false ? false : true;
                console.log(plantuml_server_check_result, filter_check);

                if (!plantuml_server_check_result || !filter_check) {
                  console.log("rellm");
                  get_llm();
                }
              }
              get_llm();
            },
          },
        });
      });
    </script>
  </body>
</html>
